<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>贪食球</title>

    </head>

    <!-- 画布 -->
    <body onkeydown="judgeDireciton(event)">
        <br>
        <div style="text-align: center">
            <canvas
                id="canvasBackground"
                width="600"
                height="500"
                style="border:1px solid #ae04fd;"></canvas>
        </div>

        <script type="text/JavaScript">

            // 设置背景图片

            var canvasBackground = document.getElementById("canvasBackground");
            var ctx = canvasBackground.getContext("2d");
            var img = new Image();
            img.src = "http://file03.16sucai.com/2016/10/1100/16sucai_p20161013183_670.JPG";
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
            }

            //大球的属性
            var bigBall = {

                x: 100,
                y: 400,
                radius: 25,
                color: "blue"
            };

            // 小球的属性
            var littleBall = {

                x: 400,
                y: 100,
                radius: 5,
                color: "blue"
            };

            // 小正方体的属性
            var littleSquare = {

                x: 100,
                y: 100,
                width: 10,
                height: 10,
                color: "red"
            };

            //清除画布并重置
            function resetCanvas() {

                //清除画布
                ctx.clearRect(0, 0, canvasBackground.width, canvasBackground.height);

                //重置画布
                ctx.drawImage(img, 0, 0);

                //绘制打球并填充颜色
                ctx.beginPath();

                ctx.arc(bigBall.x, bigBall.y, bigBall.radius, 0, 2 * Math.PI);

                ctx.stroke();

                ctx.fillStyle = bigBall.color;

                ctx.fill();

                //展示小球和小正方形
                showFood();

            }

            window.addEventListener("load", resetCanvas, true);

            // 判断按键
            function judgeDireciton(event) {
                switch (event.keyCode) {
                    case 37: //左键
                        bigBall.x = bigBall.x - 2;
                        showBigBall();
                        break;

                    case 38: //上键
                        bigBall.y = bigBall.y - 2;
                        showBigBall();
                        break;
                    case 39: //右键
                        bigBall.x = bigBall.x + 2;
                        showBigBall();
                        break;
                    case 40: //下键
                        bigBall.y = bigBall.y + 2;
                        showBigBall();
                        break;

                }
            }

            // 显示食物
            function showFood() {

                showLittleBall();
                showLittleSquare();
            }

            // 显示小正方形

            function showLittleSquare() {
                ctx.rect(
                    littleSquare.x,
                    littleSquare.y,
                    littleSquare.width,
                    littleSquare.height
                );
                ctx.fillStyle = littleSquare.color;
                ctx.fillRect(
                    littleSquare.x,
                    littleSquare.y,
                    littleSquare.width,
                    littleSquare.height
                )
            }

            //显示小球

            function showLittleBall() {

                ctx.beginPath();

                ctx.arc(littleBall.x, littleBall.y, littleBall.radius, 0, 2 * Math.PI);

                ctx.fillStyle = littleBall.color;

                ctx.fill();
            }

            //显示大球

            function showBigBall() {

                //判断和小球是否碰撞
                if (judgeLittleBallCollision()) {
                    //改变小球坐标

                    changeLittleBall();

                    //大球变大,变色
                    bigBall.radius = bigBall.radius + 2;
                    bigBall.color = littleBall.color;
                }

                //判断和小正方体是否碰撞
                if (judgeLlittleSquareCollision()) {
                    //改变小正方体坐标

                    changeLlittleSquare();

                    //大球变大,变色
                    bigBall.radius = bigBall.radius + 2;
                    bigBall.color = littleSquare.color;
                }

                // 判断大球的体积是否过大
                if (bigBall.radius > 200) {
                    bigBall.radius = 200;
                }
                resetCanvas()
            }

            //判断碰撞
            function judgeLittleBallCollision() {
                return (bigBall.x - littleBall.x) * (bigBall.x - littleBall.x) + (
                    bigBall.y - littleBall.y
                ) * (bigBall.y - littleBall.y) <= (bigBall.radius + littleBall.radius) * (
                    bigBall.radius + littleBall.radius
                )
            }

            function judgeLlittleSquareCollision() {
                return (bigBall.x - littleSquare.x) * (bigBall.x - littleSquare.x) + (
                    bigBall.y - littleSquare.y
                ) * (bigBall.y - littleSquare.y) <= (bigBall.radius + 8) * (bigBall.radius + 8)
            }

            //随机改变坐标
            function changeLittleBall() {
                littleBall.x = Math.ceil(Math.random() * 600);
                littleBall.y = Math.ceil(Math.random() * 500);
            }

            function changeLlittleSquare() {
                littleSquare.x = Math.ceil(Math.random() * 600);
                littleSquare.y = Math.ceil(Math.random() * 500);
            }
        </script>

    </body>
</html>